<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单-粤亮旅游网</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/orders.css">
    <script src="../js/jquery-3.3.1.js"></script>
</head>

<body>
<!-- 快捷导航栏开始 -->
<section class="shortcut">
    <div class="top-bgc">
        欢迎来到粤亮旅游网!
    </div>
    <div class="w">
        <div class="mine">
            <ul>
                <li class="fl">
                    <a href="collect.html">我的收藏</a>

                    <a href="#" class="logout">退出</a>
                </li>

            </ul>
        </div>

    </div>
</section>
<!-- 核心部分 -->
<div class="box w">
    <div class="tit">我的订单</div>
    <!-- 添加类名hotels-orders -->
    <div class="hotels-orders">
        <div class="the-tit">酒店订单</div>
        <div class="orders">

        </div>
    </div>

    <div class="trains-orders">
        <div class="the-tit">火车票订单</div>
        <div class="orders">

        </div>


    </div>
</div>

<script>
    //删除订单点击事件
    function deleteHotel(hotelOrderId){
        console.log(hotelOrderId)

        const flag = confirm("确定删除酒店订单吗");
        if (flag){
            // 发送 Ajax 请求
            $.ajax({
                url: `/hotel/remove?hotelOrderId=${hotelOrderId}`,
                type: "GET",
                contentType: "application/json",
                success: function (response) {
                    // 处理响应
                    if (response.success === 1) {
                        alert("删除成功")
                        window.location.href = 'orders.html'
                    }else if (response.success === 0){
                        alert(response.msg);
                    }
                },
                error: function () {
                    alert("请求失败");
                }
            })
        }
    }

    function deleteTicket(trainOrderId){
        console.log(trainOrderId)

        const flag = confirm("确定删除车票订单吗");
        if (flag){
            // 发送 Ajax 请求
            $.ajax({
                url: `/ticket/remove?trainOrderId=${trainOrderId}`,
                type: "GET",
                contentType: "application/json",
                success: function (response) {
                    // 处理响应
                    if (response.success === 1) {
                        alert("删除成功")
                        window.location.href = 'orders.html'
                    }else if (response.success === 0){
                        alert(response.msg);
                    }
                },
                error: function () {
                    alert("请求失败");
                }
            })
        }
    }

    // 获取图片链接
    function getImage(image) {
        return `/common/download?name=${image}`;
    }

    let hotelOrders = document.querySelector('.box .hotels-orders .orders')
    let trainOrders = document.querySelector('.box .trains-orders .orders')


    // 页面加载完成后发送AJAX请求
    window.addEventListener("DOMContentLoaded", function () {
        // 发送 Ajax 请求
        $.ajax({
            url: `/hotel/orders`,
            type: "PUT",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    let html = '';
                    response.data.forEach(function (hotelOrder) {
                        const image = getImage(hotelOrder.hotelImage);
                        html += `
                  <div class="order">
        <img src="${image}" alt="">
        <div class="hotel-name">${hotelOrder.hotelName}</div>
        <div class="unfold">
          展开详情
        </div>
        <div class="order-detail">
          <table>
            <tr>
              <td>房型:</td>
              <td>${hotelOrder.reservationRoom}</td>
            </tr>
            <tr>
              <td>人数:</td>
              <td>2人</td>
            </tr>
            <tr>
              <td>入住时间:</td>
              <td>${hotelOrder.stayTime}</td>
            </tr>
            <tr>
              <td>离店时间:</td>
              <td>${hotelOrder.leaveTime}</td>
            </tr>
            <tr>
              <td>价格:</td>
              <td>¥${hotelOrder.totalPrice}</td>
            </tr>
          </table>
          <div class="triangle"></div>
        </div>
                <button class="remove" onclick="deleteHotel(${hotelOrder.orderId})">删除订单</button>

      </div>

                `
                    });
                    hotelOrders.innerHTML = html;
                } else {
                    alert("查询失败");
                }
            },
            error: function () {
                alert("请求失败");
            }
        })

        // 发送 Ajax 请求
        $.ajax({
            url: `/ticket/orders`,
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    let html = '';
                    response.data.forEach(function (trainOrder) {

                        const date1 = new Date(trainOrder.departureTime);
                        const date2 = new Date(trainOrder.arrivalTime);

                        let diffMs = date2 - date1;  // 相差的毫秒数
                        // 将毫秒数转化为时和分
                        const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
                        const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));

                        html += `
            <div class="order">
            <img src="../images/the-train.png" alt="">
                <div class="train-name">${trainOrder.departureStation}-${trainOrder.arrivalStation}</div>
                <div class="unfold">
                    展开详情
                </div>
                <div class="order-detail">
                    <table>
                        <tr>
                            <td>出发地:</td>
                            <td>${trainOrder.departureStation}</td>
                        </tr>
                        <tr>
                            <td>目的地:</td>
                            <td>${trainOrder.arrivalStation}</td>
                        </tr>
                        <tr>
                            <td>出发时间:</td>
                            <td>${trainOrder.departureTime}</td>
                        </tr>
                        <tr>
                            <td>抵达时间:</td>
                            <td>${trainOrder.arrivalTime}</td>
                        </tr>
                        <tr>
                            <td>全程:</td>
                            <td>${diffHours}时${diffMinutes}分</td>
                        </tr>
                        <tr>
                            <td>价格:</td>
                            <td>¥${trainOrder.price}</td>
                        </tr>
                    </table>
                    <div class="triangle"></div>
                </div>
                <button class="remove" onclick="deleteTicket(${trainOrder.ticketId})">删除订单</button>

            </div>

                `
                    });
                    trainOrders.innerHTML = html;
                } else {
                    alert("查询失败");
                }
            },
            error: function () {
                alert("请求失败");
            }
        })
    })

    const logout = document.querySelector('.logout')
    logout.addEventListener('click', function () {
        $.ajax({
            url: "/logout",
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    alert("退出成功");
                    localStorage.removeItem('responseData');
                    localStorage.removeItem('hotelDetail')
                    // 进行跳转或其他操作
                    window.location.href = 'index.html'
                } else {
                    alert("退出失败，请检查用户名和密码");
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    })
</script>
</body>

</html>